eslint 是很有名的 linter ，如果有在寫 JavaScript 應該多多少少都會知道，雖然它不該被歸類來這系列的主題「建置工具」中，不過它也算是很常用的一個工具，所以我就把它放進這個系列了

linter 這種工具是一種程式碼的靜態分析工具，它可以幫你抓出程式碼可能存在的錯誤與 bug ，也能找出程式碼風格的問題，不過也因為只是靜態分析，對 js 這種動態型別的語言能做的就比較有限了，畢竟在 js 中，變數的型態如果不執行就不容易知道，有些錯誤就不是那麼容易抓出來，雖說如此，能做的檢查還是很多就是了

安裝

安裝 eslint 本身只需要安裝 eslint 一個套件而已，而且 eslint 有自帶一些規則，所以也可以不安裝任何 plugin 就做到基本的檢查，只是通常還是會安裝 plugin 來使用

$ yarn add --dev eslint

eslint 除了可以安裝 plugin 來搭配使用外，也可以安裝另外兩種東西，加起來共 3 種：

• plugin: eslint 的 plugin 可以幫 eslint 增加規則，另外它其實也可以帶有設定檔讓使用者使用， plugin 可以提供一份自己推薦的設定
• config: 可以重覆使用的設定檔，比較有名的有 standard 跟 airbnb ，設定檔有可能會有需要的 plugin ，使用者要自己去安裝
• parser: 擴充 eslint 可以處理的語法，比如有 babel-eslint 用 babel 來轉換 js ，讓 eslint 可以處理實驗性的語法，或是 @typescript-eslint/parser ，讓 eslint 可以處理 typescript ，還有 vue-eslint-parser 是處理 vue 的檔案的

使用

雖然安裝很簡單，但 eslint 是不設定就什麼事都不會做的，所以還是要提供一個基本的設定，而 eslint 有提供一個簡單的初始化設定的指令，只要下這個指令，並回答幾個問題， eslint 就會產生一個基本的設定：

$ yarn eslint --init

eslint 的設定檔可以是 js, json 或 yml 的格式，這邊用 js 的格式，檔名要取叫 .eslintrc.js ，這邊就用基本的設定，就是只用 eslint:recommended 這組設定，有不少的 plugin 也會像這樣提供自己的基本設定：

module.exports = {
  extends: 'eslint:recommended',
}

eslint 的設定檔有幾個基本的欄位，另外這邊也順便講幾個我自己慣用的 config 的 plugin，首先是 config 的部份：

• eslint-config-standard: 有名的設定檔，它目前還有另外 4 個必須要裝的 plugin ，要使用的要自己裝
• eslint-config-prettier: 一個關掉跟排版相關的選項的設定檔，因為要交給 prettier 處理，關掉就不會發生衝突了

plugin 這邊我並沒有列出 standard 所相依的 plugin:

• eslint-plugin-simple-import-sort: 能自動排序 import 的一個 plugin
• eslint-plugin-eslint-comments: 檢查 eslint 的特殊註解的一個 plugin ， eslint 可以用特殊的註解開關規則，這等下會講到，而這個 plugin 基本上就是不允許關了規則就不開，跟關掉所有規則的 plugin

把上面的都寫進設定檔就會像：

module.exports = {
  // 設定要拿來當基底的設定檔
  extends: [
    'standard',
    // 加上 prettier 的設定，關掉部份的樣式檢查，這順序很重要的
    // 因為設定是照順序套用的，如果讓 standard 在後面的話，就沒辦法蓋過去了
    'prettier',
    'prettier/standard',
    // 如果是 plugin 提供的設定就要加上 `plugin:` 的開頭
    'plugin:eslint-comments/recommended',
  ],
  // 額外的規則，這邊也可以決定要不要再關掉某些規則
  rules: {
    // 設定 plugin `eslint-plugin-simple-import-sort` 的 `sort` 規則是 `error` 也就是不符合時是會報錯的
    // 另外還可以設定為 `warn` 只警告，或是 `off` 來關掉
    // 有的規則也有選項，這時就是用 ['error', {<options>}] 像 babel 的格式了
    'simple-import-sort/sort': 'error',
  },
  // 設定執行的環境，這會影響到有哪些是全域變數的判斷
  env: {
    browser: true
  },
  // 設定 eslint 自己的 parser 用的是哪一版的 js ，這通常就照 eslint --init 的設定就行了
  parserOptions: {
    ecmaVersion: 12,
  },
}

運作原理

其實 eslint 跟 babel 還挺像的，同樣都是先把檔案轉成 AST ，如果想看 eslint 轉出來的 AST 的話，可以到 AST Explorer ，上面的 parser 選擇 espree ，這是 eslint 內部使用的 parser ，它跟 babel 的 parser 有點不太一樣，應該說是 babel 的 parser 跟其他人不一樣才是， ECMAScript (js 的標準) 有訂一套 js 的 AST 該有哪些節點，怎麼命名的，是 babel 跟別人不同，另外 eslint 的 parser 需要很詳細的資訊，不能只有程式碼的節點本身而已，這樣它才能做好 lint 的工作

它的運作方式也是像 babel 一樣，讓 plugin 註冊 visitor ，對特定的節點進行檢查，如果有問題就透過它的 API 做回報，也可以透過它的 API 提供修正的程式，這在下一篇再來說明